Fill Colors in Figma refers to the process of applying solid colors, gradients, images, or other visual fills to design objects such as frames, shapes, buttons, cards, icons, and components. Fill colors are one of the most important visual properties in UI design because they help establish hierarchy, branding, contrast, emphasis, and visual consistency.
For structured UI/UX learning and practical Figma projects, explore JustAcademy Figma Training. You can also Register for Figma Course Demo to explore the training approach.
A Fill is a visual property that determines the color or visual content displayed inside a Figma layer. When you create a rectangle, frame, ellipse, button, card, or other object, you can apply a fill to its interior area.
For example, a button may have a blue fill, a card may have a white fill, and a warning message may have a light yellow fill.
Button
┌─────────────────────────┐
│ Submit │
└─────────────────────────┘
↑
Fill Color
Fill colors play an important role in creating attractive, readable, and consistent interfaces.
When an object is selected in Figma, the Fill property is available in the Design panel on the right side of the interface.
Figma Interface
┌──────────────────────────────────────────┐
│ Toolbar │
├───────────────────────┬──────────────────┤
│ │ Design Panel │
│ Canvas │ │
│ │ Fill │
│ Object │ ███████████ │
│ │ │
└───────────────────────┴──────────────────┘
The Fill section allows you to select a color and change properties such as opacity and color type.
To apply a basic fill color:
Figma provides a color picker that allows designers to select and customize colors precisely. You can visually choose a color or enter specific color values.
Depending on the selected color mode, you can work with values such as HEX, RGB, HSL, and other supported color representations.
HEX is a commonly used color format in web and UI design. A HEX value generally begins with the # symbol followed by six hexadecimal characters.
#FFFFFF = White
#000000 = Black
#FF0000 = Red
#00FF00 = Green
#0000FF = Blue
#2563EB = Blue
For example, a primary button can use #2563EB as its fill color.
RGB stands for Red, Green, and Blue. A color is created by combining different levels of these three channels.
RGB Example:
R = 37
G = 99
B = 235
Result = Blue
RGB is particularly useful when working with digital interfaces and development handoff.
HSL stands for Hue, Saturation, and Lightness.
HSL
Hue → Color family
Saturation → Intensity
Lightness → Brightness
A Solid Fill is the simplest type of fill. It applies one consistent color to the selected object.
Card
┌─────────────────────────┐
│ │
│ Card Content │
│ │
└─────────────────────────┘
Solid Fill
Solid fills are commonly used for buttons, cards, navigation bars, backgrounds, badges, and input fields.
Figma allows designers to work with multiple fill layers on an object. Multiple fills can be useful when creating complex visual effects.
Object
├── Fill 1 → Base Color
├── Fill 2 → Gradient
└── Fill 3 → Overlay
Multiple fills should be used carefully because excessive visual layers can make a design harder to maintain.
Opacity controls how transparent a fill appears. A value of 100% makes the fill fully visible, while lower values make it increasingly transparent.
| Opacity | Effect |
|---|---|
| 100% | Fully opaque |
| 75% | Slight transparency |
| 50% | Medium transparency |
| 25% | Highly transparent |
| 0% | Invisible fill |
Fill opacity and layer opacity can produce different design results when an object contains other properties such as strokes or effects.
| Property | Purpose |
|---|---|
| Fill Opacity | Controls the transparency of the fill |
| Layer Opacity | Controls the transparency of the entire layer |
Understanding this difference is useful when creating overlays, effects, and component states.
A gradient fill transitions between two or more colors. Gradients can create depth, emphasis, and modern visual effects.
Gradient
Color A ───────────────► Color B
Blue Purple
Gradients are commonly used in hero sections, buttons, backgrounds, cards, illustrations, and promotional UI elements.
A linear gradient transitions colors along a straight line.
Blue ───────────────────► Purple
Linear Direction
The direction can be horizontal, vertical, diagonal, or customized according to the design.
A radial gradient spreads colors outward from a central point.
Light
╱─────╲
╱ ╲
│ Center │
╲ ╱
╲─────╱
Dark
Radial gradients can be useful for glowing backgrounds, decorative elements, illustrations, and visual emphasis.
An angular gradient transitions colors around a central point in a circular or angular direction. It can be useful for colorful visual effects, charts, illustrations, and decorative UI elements.
A diamond gradient distributes color transitions in a diamond-shaped pattern. It can be used for experimental visual effects and decorative backgrounds.
Figma also allows images to be used as fills. This is useful when placing photographs or visual assets inside shapes and frames.
Shape
┌─────────────────────────┐
│ IMAGE FILL │
│ │
│ Product Photo │
│ │
└─────────────────────────┘
Image fills are commonly used for product cards, profile images, banners, thumbnails, and hero sections.
When using an image as a fill, Figma provides different ways to fit the image inside the selected object.
| Mode | Description |
|---|---|
| Fill | Fills the object while maintaining image proportions |
| Fit | Fits the entire image inside the object |
| Crop | Allows the designer to control which part of the image is visible |
| Tile | Repeats the image within the object |
Buttons commonly use fill colors to communicate importance and interaction.
Primary Button
┌───────────────────┐
│ Get Started │
└───────────────────┘
Fill: Primary Brand Color
A typical button system may include different fill colors for primary, secondary, success, warning, and destructive actions.
| State | Example Fill | Purpose |
|---|---|---|
| Default | Primary Color | Normal interaction |
| Hover | Darker/Lighter Color | Pointer interaction |
| Pressed | Dark Variant | Active interaction |
| Disabled | Muted Color | Unavailable action |
| Focus | Base Fill + Focus Indicator | Keyboard/accessibility state |
Cards often use neutral fill colors to separate content from the page background.
Page Background
──────────────────────────
┌────────────────────────┐
│ Card │
│ │
│ Product Information │
│ │
└────────────────────────┘
For example, a white card can be placed on a light gray background to create visual separation.
Frames can have fill colors that define the background of an entire screen or component.
Mobile Frame
┌─────────────────────────┐
│ │
│ App Interface │
│ │
│ │
└─────────────────────────┘
Frame Fill
Background colors establish the visual foundation of a design. Common choices include white, off-white, light gray, dark gray, black, and brand colors.
| Background Type | Common Use |
|---|---|
| White | Clean interfaces |
| Light Gray | Dashboard and card separation |
| Dark | Dark mode interfaces |
| Brand Color | Marketing or promotional screens |
| Gradient | Hero and decorative sections |
Color can guide users toward important elements. Strong or contrasting fills can attract attention, while neutral fills can reduce emphasis.
High Emphasis
↓
Primary CTA → Strong Fill
↓
Secondary Action → Subtle Fill
↓
Supporting Content → Neutral Fill
Contrast is important for readability and accessibility. Text placed on a fill should remain easy to read.
Good Example:
Dark Fill
└── Light Text
Good Example:
Light Fill
└── Dark Text
Avoid:
Low-Contrast Fill
└── Similar Text Color
Designers should check contrast carefully, especially for body text, buttons, labels, and important controls.
Brand colors can be applied consistently across buttons, links, headers, icons, cards, and other interface elements.
Brand Color System
Primary → #2563EB
Secondary → #7C3AED
Success → Green
Warning → Yellow
Error → Red
Neutral → Gray
The actual colors should be selected according to the project's brand guidelines and accessibility requirements.
A color palette contains a structured collection of colors used throughout a design.
| Category | Purpose |
|---|---|
| Primary | Main brand and primary actions |
| Secondary | Supporting actions and visual accents |
| Success | Successful operations |
| Warning | Warnings and attention messages |
| Error | Errors and destructive actions |
| Neutral | Backgrounds, borders, and text support |
Reusable color styles help maintain consistency across large Figma projects. Instead of manually selecting the same color repeatedly, designers can create reusable color styles or use variables according to the project's design-system workflow.
Color Styles
├── Brand / Primary
├── Brand / Secondary
├── Text / Primary
├── Text / Secondary
├── Background / Primary
├── Background / Secondary
├── Status / Success
├── Status / Warning
└── Status / Error
Figma variables can be used to create reusable design values, including color values. Variables are especially useful for scalable design systems and themes.
Color Variable
Primary/500
↓
Buttons
↓
Links
↓
Icons
↓
Components
When the variable value is updated, connected design elements can use the updated value consistently.
Fill colors can be organized for different themes.
| Element | Light Mode | Dark Mode |
|---|---|---|
| Page Background | Light | Dark |
| Card | White | Dark Gray |
| Primary Text | Dark | Light |
| Primary Button | Brand Color | Brand Color |
Input fields commonly use neutral fills to distinguish them from the page background.
Input Field
┌───────────────────────────┐
│ Enter your email │
└───────────────────────────┘
↑
Fill Color
Different fills can represent normal, focused, disabled, error, or success states.
Status messages can use semantic colors.
Color should not be the only method of communicating meaning. Supporting text, icons, or other visual indicators can improve accessibility.
Navigation bars can use fills to establish a strong visual structure.
┌─────────────────────────────────────┐
│ Logo Home Products About │
└─────────────────────────────────────┘
Navigation Fill
Active navigation items may use a different fill or background treatment to communicate the current location.
Icons can use fills when working with filled vector shapes. Consistent icon colors help maintain visual hierarchy and brand consistency.
Icon System
├── Primary Icon
├── Secondary Icon
├── Active Icon
├── Disabled Icon
└── Error Icon
Illustrations often use multiple fills to create depth and visual storytelling. Each part of an illustration can have a separate fill.
Illustration
├── Background Fill
├── Character Fill
├── Clothing Fill
├── Object Fill
└── Accent Fill
When working with multiple objects, you can select several compatible layers and change their fill together. This can speed up repetitive design work.
Select Multiple Objects
↓
Change Fill
↓
All Selected Objects Updated
When the same visual treatment is required across multiple objects, copying or reusing an existing color value helps maintain consistency.
Existing Object
Fill → Brand Blue
↓
Copy/Reapply
↓
New Object
Fill → Brand Blue
A fill can be removed when an object needs to become transparent or when only its stroke should remain visible.
Before:
┌───────────────┐
│ Fill │
└───────────────┘
After:
┌───────────────┐
│ Transparent │
└───────────────┘
Removing a fill is useful for outlines, transparent containers, icons, and certain decorative elements.
| Property | Purpose | Example |
|---|---|---|
| Fill | Colors the inside of an object | Blue button background |
| Stroke | Colors the boundary of an object | Button border |
┌─────────────────────────┐
│ │
│ Fill │
│ │
└─────────────────────────┘
↑ ↑
Stroke
Fill colors can work together with effects such as shadows, blurs, and other visual treatments.
Card
├── Fill
├── Stroke
├── Drop Shadow
└── Other Effects
A balanced combination can create depth without making the interface visually cluttered.
Components can use consistent fill colors across reusable UI elements. For example, a button component can have a primary fill and different fills for its interaction states.
Button Component
├── Default
│ └── Primary Fill
├── Hover
│ └── Hover Fill
├── Pressed
│ └── Pressed Fill
└── Disabled
└── Disabled Fill
Variants can represent different visual states of the same component.
| Variant | Fill Purpose |
|---|---|
| Primary | Main action |
| Secondary | Supporting action |
| Success | Positive action |
| Danger | Destructive action |
| Disabled | Unavailable action |
Auto Layout controls the arrangement and sizing of elements, while Fill controls their visual appearance. Combining both creates flexible UI components.
Auto Layout Button
┌─────────────────────────┐
│ Button Label │
└─────────────────────────┘
↓
Padding + Fill + Text
Responsive layouts may use the same color system across desktop, tablet, and mobile designs while adjusting dimensions and layout structure.
Desktop → Primary Fill
Tablet → Primary Fill
Mobile → Primary Fill
↓
Consistent Branding
Website interfaces commonly use fills for headers, navigation bars, hero sections, cards, buttons, forms, footers, and backgrounds.
Website
├── Header → Brand Fill
├── Hero → Background Fill
├── Cards → Neutral Fill
├── CTA → Primary Fill
└── Footer → Dark Fill
Mobile applications use fills for app backgrounds, navigation elements, buttons, cards, bottom sheets, input fields, and status indicators.
Mobile App
├── App Background
├── Top Bar
├── Cards
├── Buttons
├── Input Fields
└── Bottom Navigation
Suppose you need to create a primary button for a web application.
Primary Button
┌─────────────────────┐
│ Get Started │
└─────────────────────┘
Fill → Brand Primary
A product card can use multiple fill treatments for the card background, image area, price badge, and action button.
┌──────────────────────────┐
│ Image Area │
│ │
├──────────────────────────┤
│ Product Name │
│ ₹1,999 │
│ │
│ [ Add to Cart ] │
└──────────────────────────┘
Card Fill → Neutral
Button Fill → Primary
A login screen can use a background fill, card fill, input fill, and button fill to establish clear hierarchy.
Login Screen
┌──────────────────────────────┐
│ Background Fill │
│ │
│ ┌──────────────────────┐ │
│ │ Login Card │ │
│ │ │ │
│ │ Email │ │
│ │ Password │ │
│ │ │ │
│ │ [ Login ] │ │
│ └──────────────────────┘ │
└──────────────────────────────┘
Dashboard designs often use several neutral fills combined with accent colors.
Dashboard
┌───────────┬─────────────────────────┐
│ Sidebar │ Header │
│ Dark Fill ├─────────────────────────┤
│ │ Card Card Card │
│ │ Neutral Fills │
│ │ │
│ │ Chart Area │
└───────────┴─────────────────────────┘
In a professional design system, fill colors should be organized into reusable tokens or variables.
Design System
├── Brand
│ ├── Primary
│ └── Secondary
├── Background
│ ├── Primary
│ └── Secondary
├── Surface
│ ├── Default
│ └── Elevated
├── Status
│ ├── Success
│ ├── Warning
│ ├── Error
│ └── Information
└── Interactive
├── Default
├── Hover
├── Pressed
└── Disabled
Choose Object
↓
Open Design Panel
↓
Locate Fill
↓
Choose Fill Type
↓
Select Color
↓
Set Opacity
↓
Check Contrast
↓
Apply Style/Variable
↓
Review Across Components
| Fill Type | Use Case |
|---|---|
| Solid | Buttons, cards, backgrounds |
| Linear Gradient | Hero sections and visual backgrounds |
| Radial Gradient | Glow and decorative effects |
| Angular Gradient | Special visual effects |
| Diamond Gradient | Decorative compositions |
| Image | Photos, products, thumbnails |
| Feature | Purpose |
|---|---|
| Fill | Applies visual color/content to an object |
| Color Style | Reusable color definition for consistent design |
| Variable | Reusable and flexible design value that can support scalable systems and themes |
Consistent fill colors make developer handoff easier because developers can identify intended colors and map them to design tokens or CSS values.
Figma
Primary Fill
#2563EB
↓
Developer Handoff
↓
CSS
background-color: #2563EB;
In professional projects, using named design tokens or variables can make the relationship between design and development even clearer.
Fill is a property used to define the visual content inside a design object, such as a solid color, gradient, or image.
The Fill property is available in the Design panel when an appropriate object is selected.
Fill controls the inside of an object, while Stroke controls its boundary or outline.
A gradient fill creates a transition between two or more colors.
Fill opacity controls how transparent the fill appears.
They allow designers to reuse consistent color definitions across multiple design elements.
Variables help create scalable design systems and can support reusable values and theme-based workflows.
Fill colors communicate button hierarchy and different interaction states such as default, hover, pressed, and disabled.
Appropriate contrast improves readability and accessibility, especially for text and interactive controls.
Yes. Images can be used as fills inside supported Figma objects.
| Topic | Key Point |
|---|---|
| Fill | Controls the inside visual appearance of an object |
| Solid Fill | Uses one consistent color |
| Gradient | Creates a transition between colors |
| Image Fill | Uses an image inside an object |
| Opacity | Controls transparency |
| Color Style | Provides reusable color definitions |
| Variable | Supports scalable reusable design values |
| Contrast | Supports readability and accessibility |
| Design System | Organizes colors consistently across a product |
Fill Colors are a fundamental part of designing interfaces in Figma. By understanding solid fills, gradients, image fills, opacity, color palettes, reusable styles, variables, semantic colors, contrast, and component states, designers can create interfaces that are visually consistent and easier to maintain.
Fill colors become especially powerful when combined with components, Auto Layout, responsive design, variants, and design systems. A well-organized color system improves both the visual quality of the interface and the efficiency of the overall design workflow.
To learn Figma and UI/UX design through practical projects, visit JustAcademy Figma Training or Register for Figma Course Demo.
